<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="130px"
      v-loading="formLoading"
    >
      <el-form-item label="就诊人" prop="patientName">
        <el-input disabled v-model="formData.patientName" placeholder="请输入就诊人姓" />
      </el-form-item>
      <el-form-item label="手术日期" prop="surgeryDate">
        <el-date-picker
          v-model="formData.surgeryDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择手术日期"
        />
      </el-form-item>
      <el-form-item label="术者" prop="surgeryName">
        <el-input v-model="formData.surgeryName" placeholder="请输入术者" />
      </el-form-item>
      <el-form-item label="术式" prop="surgeryMethod">
        <el-select v-model="formData.surgeryMethod" multiple placeholder="请选择术式">
          <el-option label="腹腔镜 RP" value="腹腔镜 RP" />
          <el-option label="开放式 RP" value="开放式 RP" />
          <el-option label="机器人辅助 RP" value="机器人辅助 RP" />
          <el-option label="筋膜内" value="筋膜内" />
          <el-option label="筋膜外" value="筋膜外" />
          <el-option label="前入路" value="前入路" />
          <el-option label="后入路" value="后入路" />
        </el-select>
      </el-form-item>
      <el-form-item label="淋巴结清扫情况" prop="lbjqsqk">
        <el-select v-model="formData.lbjqsqk" multiple placeholder="请选择淋巴结清扫情况">
          <el-option label="未清扫" value="未清扫" />
          <el-option label="标准" value="标准" />
          <el-option label="扩大" value="扩大" />
        </el-select>
      </el-form-item>
      <el-form-item label="淋巴结清扫情况左" prop="lbjqsqkLeft">
        <el-input v-model="formData.lbjqsqkLeft" placeholder="请输入淋巴结清扫情况左" />
      </el-form-item>
      <el-form-item label="淋巴结清扫情况右" prop="lbjqsqkRight">
        <el-input v-model="formData.lbjqsqkRight" placeholder="请输入淋巴结清扫情况右" />
      </el-form-item>
      <el-form-item label="是否保留性神经" prop="sfblxsj">
        <el-select v-model="formData.sfblxsj" multiple placeholder="请选择是否保留性神经">
          <el-option label="否" value="否" />
          <el-option label="保留左侧" value="保留左侧" />
          <el-option label="保留右侧" value="保留右侧" />
        </el-select>
      </el-form-item>
      <el-form-item label="尿管-留置时间" prop="ngLzsj">
        <el-date-picker
          v-model="formData.ngLzsj"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择尿管-留置时间"
        />
      </el-form-item>
      <el-form-item label="尿管-拔出时间" prop="ngBcsj">
        <el-date-picker
          v-model="formData.ngBcsj"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择尿管-拔出时间"
        />
      </el-form-item>
      <el-form-item label="引流管-留置时间" prop="ylgLzsj">
        <el-date-picker
          v-model="formData.ylgLzsj"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择引流管-留置时间"
        />
      </el-form-item>
      <el-form-item label="引流管-拔出时间" prop="ylgBcsj">
        <el-date-picker
          v-model="formData.ylgBcsj"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择引流管-拔出时间"
        />
      </el-form-item>
      <el-form-item label="围手术期并发症" prop="wssqbfz">
        <el-select v-model="formData.wssqbfz" multiple placeholder="请选择围手术期并发症">
          <el-option label="无" value="无" />
          <el-option label="其它" value="其它" />
          <el-option label="直肠损失" value="直肠损失" />
          <el-option label="血管损伤" value="血管损伤" />
          <el-option label="神经损伤" value="神经损伤" />
          <el-option label="淋巴漏" value="淋巴漏" />
        </el-select>
      </el-form-item>
      <el-form-item label="并发症及处理方式" prop="bfzjclfs">
        <el-input v-model="formData.bfzjclfs" placeholder="请输入并发症及处理方式" />
      </el-form-item>
      <el-form-item label="术后诊断" prop="shzd">
        <el-input v-model="formData.shzd" placeholder="请输入术后诊断" />
      </el-form-item>
      <el-form-item label="Gleason 病理" prop="gleasonBl">
        <el-input v-model="formData.gleasonBl" placeholder="请输入Gleason 病理" />
      </el-form-item>
      <el-form-item label="病理结果黏贴处" prop="bljgntc">
        <el-input v-model="formData.bljgntc" placeholder="请输入病理结果黏贴处" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { PatientGzxssApi, PatientGzxss } from '@/api/business/patientgzxss'

/** 根治性手术 表单 */
defineOptions({ name: 'PatientGzxssForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  patientId: undefined,
  patientName: undefined,
  doctorId: undefined,
  doctorName: undefined,
  surgeryDate: undefined,
  surgeryName: undefined,
  surgeryMethod: undefined,
  lbjqsqk: undefined,
  lbjqsqkLeft: undefined,
  lbjqsqkRight: undefined,
  sfblxsj: undefined,
  ngLzsj: undefined,
  ngBcsj: undefined,
  ylgLzsj: undefined,
  ylgBcsj: undefined,
  wssqbfz: undefined,
  bfzjclfs: undefined,
  shzd: undefined,
  gleasonBl: undefined,
  bljgntc: undefined,
})
const formRules = reactive({
  patientId: [{ required: true, message: '就诊人ID不能为空', trigger: 'blur' }],
  patientName: [{ required: true, message: '就诊人姓名（冗余）不能为空', trigger: 'blur' }],
  doctorId: [{ required: true, message: '录入医生ID不能为空', trigger: 'blur' }],
  doctorName: [{ required: true, message: '录入医生姓名（冗余）不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()

  formData.value.patientId = route.query.id
  formData.value.patientName = route.query.name
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await PatientGzxssApi.getPatientGzxss(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as PatientGzxss
    if (formType.value === 'create') {
      await PatientGzxssApi.createPatientGzxss(data)
      message.success(t('common.createSuccess'))
    } else {
      await PatientGzxssApi.updatePatientGzxss(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    patientId: undefined,
    patientName: undefined,
    doctorId: undefined,
    doctorName: undefined,
    surgeryDate: undefined,
    surgeryName: undefined,
    surgeryMethod: undefined,
    lbjqsqk: undefined,
    lbjqsqkLeft: undefined,
    lbjqsqkRight: undefined,
    sfblxsj: undefined,
    ngLzsj: undefined,
    ngBcsj: undefined,
    ylgLzsj: undefined,
    ylgBcsj: undefined,
    wssqbfz: undefined,
    bfzjclfs: undefined,
    shzd: undefined,
    gleasonBl: undefined,
    bljgntc: undefined,
  }
  formRef.value?.resetFields()
}
const route = useRoute() // 路由
const router = useRouter() // 路由

/** 初始化 **/
onMounted(() => {
  // 如果就诊人 ID 不存在，显示错误提示并关闭页面
  if (!route.query.id) {
    message.error('就诊人 ID 不存在，无法查看就诊记录')
    // 关闭当前路由，返回到就诊人列表页面
    router.push({ name: 'UserPatient' })
    return
  }
})
</script>
